<template>
    <!-- 横向滚动列表 -->
    <div class="horizontal-scroll">
        <div class="scroll-contener" ref="swiperContener">
            <div
                class="left-button"
                @click="handelLeftClick"
                v-if="canScroll"
                :class="canLeft ? 'can' : ''"
            ></div>
            <div
                class="contener-list"
                ref="swiperList"
                :style="'left:' + swiperWidth + 'px'"
            >
                <slot></slot>
            </div>
            <div
                class="right-button"
                @click="handelRightClick"
                v-if="canScroll"
                :class="canRight ? 'can' : ''"
            ></div>
        </div>
    </div>
</template>
<script>
export default {
    props: {
        scrollLength: {
            type: Number,
            default: 0
        }
    },
    data() {
        return {
            // 向右滑动得距离
            swiperWidth: 0,
            // 可以向右侧滑动
            canRight: true,
            // 可以向左侧滑动
            canLeft: false,
            // 是否可以滑动
            canScroll: false
        }
    },
    mounted() {
        this.getSwiperContenerWidth()
    },
    methods: {
        // 获取容器得宽度
        getSwiperContenerWidth() {
            let contenerWidth = this.$refs.swiperContener.offsetWidth
            let scrollWidth = this.$refs.swiperList.scrollWidth
            if (scrollWidth <= contenerWidth) {
                this.canRight = false
                this.canScroll = false
            } else {
                this.canScroll = true
            }
        },
        // 右侧按钮点击
        handelRightClick() {
            if (this.canRight) {
                let contenerWidth = this.$refs.swiperContener.offsetWidth
                let scrollWidth = this.$refs.swiperList.scrollWidth
                let itemsWidth = scrollWidth / this.scrollLength
                let scroll = scrollWidth - contenerWidth
                if (scroll >= -this.swiperWidth) {
                    this.swiperWidth = this.swiperWidth - itemsWidth
                    this.canLeft = true
                } else {
                    this.canRight = false
                    return
                }
            }
        },
        // 左侧按钮点击
        handelLeftClick() {
            let scrollWidth = this.$refs.swiperList.scrollWidth
            let itemsWidth = scrollWidth / this.scrollLength
            if (this.canLeft) {
                if (this.swiperWidth <= -itemsWidth) {
                    this.swiperWidth = this.swiperWidth + itemsWidth
                    this.canRight = true
                } else {
                    this.canLeft = false
                    this.swiperWidth = 0
                    return
                }
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.horizontal-scroll {
    @include box_flex(
        $width: 100%,
        $height: 100%,
        $direction: row,
        $justify: center,
        $align: center
    );

    position: relative;
    .scroll-contener {
        @include box_flex(
            $width: 100%,
            $height: 100%,
            $direction: row,
            $justify: space-between,
            $align: center
        );

        position: relative;
        overflow: hidden;
        transition: all 0.5s;
        .contener-list {
            @include box_flex(
                $width: auto,
                $height: auto,
                $direction: row,
                $justify: flex-start,
                $align: center
            );
            @include box_absolute(
                $width: auto,
                $height: 100%,
                $top: 0,
                $left: 0
            );

            transition: all 0.3s;
        }
        .left-button,
        .right-button {
            @include box_flex(
                $width: auto,
                $height: auto,
                $direction: row,
                $justify: center,
                $align: center
            );
            @include box_absolute(
                $width: 30px,
                $height: 100%,
                $top: 0,
                $zIndex: 10
            );
            // background: $color_02;
            opacity: 0;
            cursor: not-allowed;
            transition: all 0.5s;
            &::after {
                content: '';
                @include box_flex(
                    $width: 0,
                    $height: 0,
                    $direction: row,
                    $justify: center,
                    $align: center
                );

                border: solid 10px;
            }
        }
        .left-button {
            left: -30px;
            &::after {
                // border-right-color: $color_12;
                margin-right: 15px;
                border-top-color: transparent;
                border-bottom-color: transparent;
                border-left-color: transparent;
            }
        }
        .left-button.can {
            cursor: pointer;
            &::after {
                // border-right-color: $color_03;
            }
        }
        .right-button {
            right: -30px;
            &::after {
                // border-left-color: $color_12;
                margin-left: 15px;
                border-top-color: transparent;
                border-right-color: transparent;
                border-bottom-color: transparent;
            }
        }
        .right-button.can {
            cursor: pointer;
            &::after {
                // border-left-color: $color_03;
            }
        }
        &:hover {
            .left-button {
                left: 0;
                opacity: 1;
                transition: all 0.5s;
            }
            .right-button {
                right: 0;
                opacity: 1;
                transition: all 0.5s;
            }
        }
    }
}
</style>
